<!DOCTYPE html>
<html>

	<head lang="en">
		<meta charset="UTF-8">
		<title>首页</title>
		<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
		<link rel="stylesheet" href="https://cdn.bootcss.com/weui/1.1.2/style/weui.min.css">
		<link rel="stylesheet" href="https://cdn.bootcss.com/jquery-weui/1.2.0/css/jquery-weui.min.css">
		<link rel="stylesheet" href="css/reset.css" />
		<link rel="stylesheet" href="css/global.css" />
		<link rel="stylesheet" href="css/mescroll.min.css">
		<link rel="stylesheet" href="css/swiper-3.3.1.min.css">
		<style type="text/css">
			/*列表*/
			.swiper-container{
				position: fixed;
				top: 80px;
				left: 0;
				right: 0;
				bottom: 50PX;
			}			
		</style>
	</head>

	<body style="background-color: #f4f4f4;">
		<div class="inHead">
			<div class="inHead_inner center">
				<a href=""><img src="img/logo.png" alt="" class="indexPic1" /></a>
				<div class="indexSearch">
					<input type="text" placeholder="请输入关键词......" name="search" />
					<input type="button" name="indexBtn" />
				</div>
			</div>
		</div>
		<div id="nav" class="nav indexTable">
			<ul>
				<li class="on" i="0">热门</li>
				<li i="1">最新</li>
				<li i="2">精华</li>
			</ul>
		</div>
		
		

		<div style="width: 100%;height: 81px"></div>
		<div id="swiper" class="swiper-container">
			<div class="swiper-wrapper">
				<div id="mescroll0" class="swiper-slide indexTable_con mescroll" style="display: block">
					<div id="dataList0" class="indexTable_son">	
							
					</div>
				</div>
				<div id="mescroll1" class="swiper-slide indexTable_con mescroll" style="display: block">
					<div id="dataList1" class="indexTable_son">
						
					</div>
				</div>
				<div id="mescroll2" class="swiper-slide indexTable_con mescroll" style="display: block">
					<div id="dataList2" class="indexTable_son">
						
					</div>
				</div>
			</div>
		</div>
		</div>
		<div style="width: 100%;height: 50px"></div>
		<div class="footBar">
			<a href="#">
				<!--<div class="footBar_pic">
					<img src="img/footIcon1.png" alt="" />
				</div>
				<p class="on">首页</p>-->
			</a>
			<a href="#">
				<div class="footBar_pic">
					<img src="img/footIcon2_hover.png" alt="" />
				</div>
				<p>发帖</p>
			</a>
			<a href="#">
				<!--<div class="footBar_pic">
					<img src="img/footIcon3_hover.png" alt="" />
				</div>
				<p>我的</p>-->
			</a>
		</div>
	</body>

</html>

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="https://cdn.bootcss.com/jquery-weui/1.2.0/js/jquery-weui.min.js"></script>
<script src="js/mescroll.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/swiper-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>

<script type="text/javascript" charset="utf-8">
	$(function() {
		var curNavIndex = 0; //首页0; 奶粉1; 面膜2; 图书3;
		var mescrollArr = new Array(3); //4个菜单所对应的4个mescroll对象

		//初始化首页
		mescrollArr[0] = initMescroll("mescroll0", "dataList0");

		/*初始化轮播*/
		var swiper = new Swiper('#swiper', {
			onTransitionEnd: function(swiper) {

				var i = swiper.activeIndex; //轮播切换完毕的事件
				changePage(i);
			}
		});

		/*初始化菜单*/
		$("#nav li").click(function() {
			var i = Number($(this).attr("i"));
			swiper.slideTo(i); //以轮播的方式切换列表
		})

		/*切换列表*/
		function changePage(i) {
			if(curNavIndex != i) {
				//更改列表条件
				$("#nav li").each(function(n, dom) {
					if(dom.getAttribute("i") == i) {
						dom.classList.add("on");
					} else {
						dom.classList.remove("on");
					}
				})
				//隐藏当前回到顶部按钮
				mescrollArr[curNavIndex].hideTopBtn();
				//取出菜单所对应的mescroll对象,如果未初始化则初始化
				if(mescrollArr[i] == null) {
					mescrollArr[i] = initMescroll("mescroll" + i, "dataList" + i);
				} else {
					//检查是否需要显示回到到顶按钮
					var curMescroll = mescrollArr[i];
					var curScrollTop = curMescroll.getScrollTop();
					if(curScrollTop >= curMescroll.optUp.toTop.offset) {
						curMescroll.showTopBtn();
					} else {
						curMescroll.hideTopBtn();
					}
				}
				//更新标记
				curNavIndex = i;
			}
		}

		/*创建MeScroll对象*/
		function initMescroll(mescrollId, clearEmptyId) {
			//创建MeScroll对象,内部已默认开启下拉刷新,自动执行up.callback,刷新列表数据;
			var mescroll = new MeScroll(mescrollId, {
				//上拉加载的配置项
				up: {
					callback: getListData, //上拉回调,此处可简写; 相当于 callback: function (page) { getListData(page); }
					isBounce: false, //此处禁止ios回弹,解析(务必认真阅读,特别是最后一点): http://www.mescroll.com/qa.html#q10
					noMoreSize: 1, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
					empty: {
						icon: "res/img/mescroll-empty.png", //图标,默认null
						tip: "暂无相关数据~", //提示
						btntext: "去逛逛 >", //按钮,默认""
						btnClick: function() { //点击按钮的回调,默认null
							alert("点击了按钮,具体逻辑自行实现");
						}
					},
					clearEmptyId: clearEmptyId, //相当于同时设置了clearId和empty.warpId; 简化写法;默认null
					toTop: { //配置回到顶部按钮
						src: "res/img/mescroll-totop.png", //默认滚动到1000px显示,可配置offset修改
						//offset : 1000
					}
				}
			});
			return mescroll;
		}

		/*联网加载列表数据  page = {num:1, size:10}; num:当前页 从1开始, size:每页数据条数 */
		function getListData(page) {			
			//联网加载数据
			var dataIndex = curNavIndex; //记录当前联网的nav下标,防止快速切换时,联网回来curNavIndex已经改变的情况;
			getListDataFromNet(dataIndex, page.num, page.size, function(pageData,totalSize) {
				//联网成功的回调,隐藏下拉刷新和上拉加载的状态;
				//mescroll会根据传的参数,自动判断列表如果无任何数据,则提示空;列表无下一页数据,则提示无更多数据;
				console.log("dataIndex=" + dataIndex + ", curNavIndex=" + curNavIndex + ", page.num=" + page.num + ", page.size=" + page.size + ", pageData.length=" + pageData.length);
				//方法一(推荐): 后台接口有返回列表的总页数 totalPage
				mescrollArr[dataIndex].endByPage(pageData.length, totalSize); //必传参数(当前页的数据个数, 总页数)

				//方法二(推荐): 后台接口有返回列表的总数据量 totalSize
				//mescrollArr[dataIndex].endBySize(pageData.length, totalSize); //必传参数(当前页的数据个数, 总数据量)

				//方法三(推荐): 您有其他方式知道是否有下一页 hasNext
				//mescrollArr[dataIndex].endSuccess(pageData.length, hasNext); //必传参数(当前页的数据个数, 是否有下一页true/false)

				//方法四 (不推荐),会存在一个小问题:比如列表共有20条数据,每页加载10条,共2页.如果只根据当前页的数据个数判断,则需翻到第三页才会知道无更多数据,如果传了hasNext,则翻到第二页即可显示无更多数据.
				//mescrollArr[dataIndex].endSuccess(pageData.length);
				
				//设置列表数据
				setListData(pageData, dataIndex);
			}, function() {
				//联网失败的回调,隐藏下拉刷新和上拉加载的状态;
				mescrollArr[dataIndex].endErr();
			});
		}

		/*设置列表数据
		 * pageData 当前页的数据
		 * dataIndex 数据属于哪个nav */
		function setListData(pageData, dataIndex) {
			var listDom = document.getElementById("dataList" + dataIndex);
			for(var i = 0; i < pageData.length; i++) {
				var pd = pageData[i];
				var str1 = '<div class="inHeadPic"><img src="img/cs.png" alt="" /></div><p>坦诚相待</p><div class="inHeadDate"><p>发布时间:'+pd.createDateTime+'</p></div>';
				var dom1 = document.createElement("div");
				dom1.classList.add("indexTable_sonHead")
				dom1.innerHTML = str1;
				var str2 = '<a href="lt_content.html?id='+pd.rid+'"><h1>'+pd.jobTitle+'</h1><p>'+pd.description+'</p>';
				console.log(str2);
				var dom2 = document.createElement("div");
				dom2.classList.add("indexTableCon");
				dom2.innerHTML = str2;
				var str3 = '<li>评论<span>33</span></li><li>查看<span>88</span></li>';
				var dom3 = document.createElement("ul");
				dom3.classList.add("indexTable_conFoot");
				dom3.classList.add("clearfix");
				dom3.innerHTML = str3;
				listDom.appendChild(dom1);
				listDom.appendChild(dom2);
				listDom.appendChild(dom3);
			}
		}

		/*联网加载列表数据
		 在您的实际项目中,请参考官方写法: http://www.mescroll.com/api.html#tagUpCallback
		 请忽略getListDataFromNet的逻辑,这里仅仅是在本地模拟分页数据,本地演示用
		 实际项目以您服务器接口返回的数据为准,无需本地处理分页.
		 * */
		function getListDataFromNet(curNavIndex, pageNum, pageSize, successCallback, errorCallback) {
			
			jQuery.support.cors = true;
			
			$.ajax({
				type: 'GET',
				url: 'http://192.168.0.100:8080/recProtal/getGrid?page='+pageNum+'&limit='+pageSize,					
				dataType: 'json',
				success: function(data) {
					var listData = [];
					data = data.data;
												
					//回调
					successCallback(data.list,data.pages);
				},
				error: errorCallback
			});
			
		}
		
		

	});
</script>